<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>用户中心</title>
		<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
		<link rel="stylesheet" href="/css/bootstrap.min.css">
		<!-- 引入VUEJS文件 -->
		<script src="/js/vue.js"></script>
		<!-- 引入JQUERYJS文件 -->
		<script src="/js/jquery.min.js"></script>
		<script src="/js/laypage/laypage.js" charset="utf-8"></script>
		<script src="/layer/layer.js"></script>

	</head>

	<body>
		<div id="app" class="container">

			<form class="form-inline bg-danger" role="form">
				查询条件：
				<div class="form-group">
					<label class="sr-only" for="userName">用户名称</label>
					<input type="text" class="form-control" id="userName" placeholder="用户名称">
				</div>

				<button type="button" id="findUser" class="btn btn-success">查询用户</button>
				<button type="button" id="addUserBtn" class="btn btn-danger">增加用户</button>
			</form>

			<div class="table-responsive">
				<table class="table">
					<thead>
						<tr class="success">
							<td>用户编号</td>
							<td>用户姓名</td>
							<td>用户密码</td>
							<td>添加时间</td>
							<td>修改时间</td>
							<td>操作</td>
						</tr>
					</thead>

					<tbody>
						<tr class="active" v-for="(item,index) in result">
							<td>{{index+1}}</td>
							<td>{{item.userName}}</td>
							<td>{{item.passWord}}</td>
							<td>{{item.createTime}}</td>
							<td>{{item.updateTime}}</td>
							<td>
								<a href="javascript:;" @click="editEvent(item.id)">编辑</a>
								<a href="javascript:;" @click="delEvent(item.id)">删除</a>
							</td>
						</tr>
					</tbody>
				</table>
				<div id="pagenav"></div>
			</div>
		</div>

		<script>
			var app = new Vue({
				el: '#app',
				data: {
					result: []
				},
				methods: {
					editEvent: function(id) {
						editEvent(id);
					},
					delEvent: function(id) {
						delEvent(id);
					}
				}
			});

			//查询用户数据
			var getUserPageList = function(curr) {
				$.ajax({
					type: "GET",
					dataType: "json",
					url: "user/list",
					data: {
						pageNum: curr || 1,
						pageSize: 10,
						userName: $("#userName").val()
						//向服务端传的参数，此处只是演示
					},
					success: function(rs) {
						app.result = rs;
						/*laypage({
							cont: 'pagenav', //容器。值支持id名、原生dom对象，jquery对象,
							pages: msg.totalPage, //总页数
							first: true,
							last: true,
							curr: curr || 1, //当前页
							jump: function(obj, first) { //触发分页后的回调
								if(!first) { //点击跳页触发函数自身，并传递当前页：obj.curr
									getUserPageList(obj.curr);
								}
							}
						});*/
					}
				});
			}

			getUserPageList();

			//查询用户事件
			$('#findUser').on('click', function() {
				getLikeUsers();
			});
			//查询用户数据
			var getLikeUsers = function(curr) {
				$.ajax({
					type: "GET",
					dataType: "json",
					url: "user/getcond",
					data: {
						/*pageNum: curr || 1,
						pageSize: 10,*/
						userName: $("#userName").val()
						//向服务端传的参数，此处只是演示
					},
					success: function(rs) {
						app.result = rs;
						/*laypage({
							cont: 'pagenav', //容器。值支持id名、原生dom对象，jquery对象,
							pages: msg.totalPage, //总页数
							first: true,
							last: true,
							curr: curr || 1, //当前页
							jump: function(obj, first) { //触发分页后的回调
								if(!first) { //点击跳页触发函数自身，并传递当前页：obj.curr
									getUserPageList(obj.curr);
								}
							}
						});*/
					}
				});
			}

			//增加用户事件
			$('#addUserBtn').on('click', function() {

				layer.open({
					type: 2,
					title: '添加用户',
					fix: false,
					maxmin: true,
					shadeClose: true,
					area: ['1100px', '600px'],
					content: 'user_add.jsp',
					end: function() {
						getUserPageList();
					}
				});

			});

			//编辑用户事件
			var editEvent = function(id) {
				layer.open({
					type: 2,
					title: '编辑用户',
					fix: false,
					maxmin: true,
					shadeClose: true,
					area: ['1100px', '600px'],
					content: 'user/edit?id=' + id,
					end: function() {
						getUserPageList();
					}
				});
			}

			//删除用户事件
			var delEvent = function(id) {
				//询问框
				console.log("======> " + id)
				layer.confirm('您确定要删除么？', {
					btn: ['是', '否']
					//按钮
				}, function() {
					//是
					$.ajax({
						type: "POST",
						data: {
							"id": id
						},
						dataType: "json",
						url: "user/deluser",
						success: function(rs) {
							getUserPageList();
							layer.msg('已经成功删除记录' + id, {
								icon: 1
							});
						}
					});

				}, function() {
					//否
				});
			}
		</script>

	</body>

</html>